<template>
    <div class="courceDetail">
        <header>
            <i class="iconfont icon-fanhui1" @click="$router.back()"></i>
            <p>课程详情</p>
            <i class="iconfont icon-24gf-branches"></i>
        </header>

        <div class="box ss">
            <p class="title">{{desc.info.title}}</p>
            <p class="num">{{desc.info.price}}</p>
            <p class="info">共1课时 | {{desc.info.browse_num}}人已报名</p>
        </div>

        <div class="desc ss">
            <p class="title">教学团队</p>
            <div class="dv1">
                <div v-for="(item,index) in desc.teachers" :key="index">
                    <img :src="item.avatar" alt="">
                    <p>{{item.teacher_name}}</p>
                </div>
            </div>
        </div>


        <div class="dv">
            <p class="title">课程介绍</p>
            <p>kiklk</p>
        </div>

        <div class="dv">
            <p class="title">课程大纲</p>
            <p>kiklk</p>
        </div>

        <van-button type="primary" block>立即报名</van-button>
    </div>
</template>


<script>
import { Button } from "vant"
import { courceDetail } from "@/http/api"
export default {
    data() {
        return {
            id: this.$route.query.id,
            desc: {}
        }
    },
    components: {
        [Button.name]: Button
    },
    created() {
        courceDetail(this.id).then(res => {
            // console.log(res);
            this.desc = res
            console.log(this.desc);
        })
    }
}
</script>


<style lang="scss" scoped>
header {
    background-color: #fff;
    height: 100px;
    display: flex;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #cccc;

    i {
        color: blue;
    }

    p {
        font-size: 30px;

    }
}

.ss {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
    overflow: hidden;
    background-color: #fff;
    line-height: 70px;
    padding-left: 20px;
    font-size: 30px;

    .num {
        color: orange;
    }

    .info {
        color: #8394a6;
    }
}

.desc {
    margin-top: 40px;
    // display: flex;

    .title {
        font-size: 35px;
    }

    .dv1 {
        display: flex;

        div {
            margin-left: 30px;
            text-align: center;

            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        }
    }
}

.dv {
    width: 100%;
    height: 0;
    padding-bottom: 20%;
    background-color: #fff;
    overflow: hidden;
    margin-top: 40px;
    padding-left: 20px;

    .title {
        font-size: 35px;
        margin-top: 20px;
        margin-bottom: 30px;
    }
}

.van-button {
    position: fixed;
    bottom: 0;
    left: 0;
    color: #ffff;
    border: none;
    background-color: #eb6100;
}
</style>
